<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<template>
    <div class="home" @scroll="homeScroll">
		<!-- <div id="nav" ref='header'> -->
			<!-- <NavigationBar :style="{'position':headerTop,'background-color':navColor}"></NavigationBar> -->
			<!-- <NavigationBar :class="searchBarFixed==true?'headerFixed':''"></NavigationBar> -->
		<!-- </div> -->
		

		<div id="nav" ref='header'>
			<el-carousel trigger="click" height="752px" class="arrow">
			<el-carousel-item 
				v-for="(b,item) in bgImg" 
				:key="item"
				:style="{'background-image':'url('+b+')','background-size':'100% 100%'}"
			>
			</el-carousel-item>
				<NavigationBar :class="searchBarFixed==true?'headerFixed':''" class="gav"></NavigationBar>
			</el-carousel>
		</div>

		<!-- 解决导航度固定出现卡顿的div (hiddle) -->
		<!-- <div class="hide" v-show="searchBarFixed==true"></div> -->
		<!-- <div class="hide" v-show="searchBarFixed==false"></div> -->
       	<MainOne/>
		<MainTwo/>
		<MainThree/>
		<MainFour ref='four'/>
		<MainFifth/>
		<MainSixth/>
		<MainSeven/>


		<div id="linker">
			<div id="linker-width">
				<div class="linker-width-p">
					<img src="/imgs/home/title07.png" class="linker-title-img">
					<p class="linker-p2">名淘电商多年荣获阿里巴巴官方殊荣：多年荣获天猫金牌淘拍档运营商、多年荣获淘宝人才金牌服务商、全球速卖通三大金牌运营服务商。同时名淘电商课程经工信部电商协会及中国智慧城市与大数据中心联合认证。</p>
				</div>
				<div class="linker-div-img">
					<img 
						v-for="(img,i) in imgs"
						:key="i" 
						:src="img" 
						class="linker-img"
					>
				</div>
			</div>
		</div>
		<Footer/>
    </div>
</template>

<script>
import NavigationBar from '@/components/NavigationBar.vue'
import MainOne from '@/components/MainOne.vue'
import MainTwo from '@/components/MainTwo.vue'
import MainThree from '@/components/MainThree.vue'
import MainFour from '@/components/MainFour.vue'
import MainFifth from '@/components/MainFifth.vue'
import MainSixth from '@/components/MainSixth.vue'
import MainSeven from '@/components/MainSeven.vue'
import Footer from '@/components/Footer.vue'
export default {
	components: {
		NavigationBar,
		MainOne,
		MainTwo,
		MainThree,
		MainFour,
		MainFifth,
		MainSixth,
		MainSeven,
		Footer,
	},
	data(){
		return {
			headerTop:'static',
			navColor:'transparent',
			searchBarFixed:false,
			position:0,
			imgs:['/imgs/home/clients-1-126x68.png','/imgs/home/clients-2-126x100.png','/imgs/home/clients-4-169x68.png','/imgs/home/clients-6-138x55.png'],
			bgImg:['/imgs/home/banner1.jpg','/imgs/home/banner2.jpg','/imgs/home/banner3.jpg'],
		}
	},
	mounted(){
		window.addEventListener('scroll',this.homeScroll);
		// console.log(this.$refs.four.$el.lastChild.childNodes[0].pageYOffset);
	},
	methods:{
		homeScroll(e){
			// 监听元素到顶部的距离  并判断滚动的距离如果大于了元素到顶部的距离时，设置searchBar为true,否则就是false
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			
			if(scrollTop >= this.$refs.header.offsetHeight){
				// this.headerTop = 'fixed';
				// this.navColor = 'black';
				this.searchBarFixed = true;
			}else{
				// this.headerTop = 'static';
				// this.navColor = 'transparent';
				this.searchBarFixed = false;
			}
		}
	},
	destroyed () {
		window.removeEventListener('scroll',this.homeScroll);
	},
}
</script>
<style scoped>
@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
#nav{
	width: 100%;
	height: 752px;
}
.gav{
	position: relative;
	z-index: 10;
}
/* 导航栏固定 */
.headerFixed{
	position: fixed;
	top: 0;
	background-color: #020F1C;
}
.hide{
	height: 752px;
}
#linker{
	height: 500px;
}
#linker-width{
	width: 1200px;
	height: 100%;
	margin: 0 auto;
}
.linker-div-img{
	display: flex;
	justify-content: space-between;
	
}
.linker-width-p{
	width: 670px;
	margin: 0 auto;
	text-align: center;
}
.linker-title-img{
	margin-top: 80px;
	margin-bottom: 30px;
}
.linker-p2{
	color: rgba(0, 0, 0, 0.7);
	line-height: 30px;
	margin-bottom: 60px;
}
.linker-img{
	opacity: 0.4;
	transition: all 0.4s;
}
.linker-img:hover{
	opacity: 1;
}
</style>


